<template>
  <div class="account">
    <div class="money-box">
      <div class="money-box-button">
        <el-button type="primary" size="mini" @click="withDraw">提现</el-button>
      </div>
      <div class="money-box-title">账户余额</div>
      <div class="money-box-balance">{{ account.balance }}元</div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="交易记录" name="1">
        <eltable :table-label="dealLabel"/>
        <div class="tip">每笔交易将收取1%的支付手续费，手续费不足0.01元按0.01元计算。</div>
      </el-tab-pane>
      <el-tab-pane label="提现记录" name="2">
        <eltable :table-label="withdrawLabel"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Eltable from '@/components/Eltable'
export default {
  components: {
    Eltable
  },
  data() {
    return {
      account: {
        balance: '0.00'
      },
      activeName: '1',
      dealLabel: [
        {
          label: '交易时间', prop: 'dealTime', width: '10'
        },
        {
          label: '名称', prop: 'name', width: '50'
        },
        {
          label: '订单号|流水号', prop: 'number', width: '20'
        },
        {
          label: '对方', prop: 'adverse', width: '10'
        },
        {
          label: '金额', prop: 'cost', width: '10'
        }
      ],
      withdrawLabel: [
        {
          label: '申请时间', prop: 'applyTime', width: '20'
        },
        {
          label: '金额', prop: 'cost', width: '20'
        },
        {
          label: '提现方式', prop: 'way', width: '10'
        },
        {
          label: '状态', prop: 'status', width: '10'
        }
      ]
    }
  },
  methods: {
    withDraw() {
      if (Number(this.account.balance) === 0) {
        alert('没有钱啦！！！')
      }
    }
  }
}
</script>

<style lang="scss">
.account {
  padding: 0 20px;
  .tip {
    color: #99a9bf;
    font-size: 12px;
    margin: 20px 0;
  }
  .money-box {
    border: 1px solid #d1dbe5;
    border-radius: 3px;
    padding: 15px;
    font-size: 14px;
    border-left: 5px solid #20a0ff;
    width: 200px;
    margin: 20px 0;
    &-button {
      float: right;
      .el-button {
        padding: 4px 6px;
      }
    }
    &-title {
      color: #8492a6;
      margin-bottom: 15px;
    }
    &-balance {
      font-size: 18px;
    }
  }
}
</style>
